<template>
  <section class="user">
    <mt-header title="我的">
      <mt-button slot="left" @click="$router.go(-1)">
        <i class="fa fa-angle-left"></i>
      </mt-button>
      <mt-button slot="right" @click="submit" :disabled="isUploading">
        保存
      </mt-button>
    </mt-header>
    <div class="content">
      <mt-cell title="我的头像" is-link @click.native="chooseImg">
        <img class="user-img" :src="userHeadImg" :onerror="errorHeadImg">
        <input type="file" ref="userImg" style="display:none" @change="setUserImg">
      </mt-cell>
      <mt-field label="用户名" placeholder="请输入用户名" v-model.trim="user.username"></mt-field>
      <mt-radio title="性别" v-model="user.sex" :options="sexOpt"></mt-radio>
      <mt-field label="邮箱" placeholder="请输入邮箱" type="email" v-model.trim="user.email"></mt-field>
      <mt-cell title="出生日期" @click.native="openDatepicker">
        <span style="color:#2b2b2b">{{user.birthday | date('yyyy年MM月dd日')}}</span>
        <span v-if="!user.birthday">选择生日日期</span>
      </mt-cell>
      <mt-datetime-picker ref="birthday" v-model="birthday" type="date" @confirm="handleConfirm" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" :startDate="startDate" :endDate="endDate">
      </mt-datetime-picker>
    </div>
  </section>
</template>

<script>
import { Toast } from 'mint-ui'
import date from '@/filters/date';

export default {
  name: 'user',
  props: [],
  data() {
    return {
      user: {},
      userHeadImg: '',
      errorHeadImg: `this.src="${require('../assets/img/default-head.png')}"`,
      sexOpt: [{
        label: '男',
        value: '1'
      }, {
        label: '女',
        value: '0'
      }],
      isUploading: false,
      pickerVisible: false,
      birthday: '',
      startDate: new Date('1900-01-01'),
      endDate: new Date()
    }
  },
  methods: {
    chooseImg() {
      this.$refs.userImg.click()
    },
    submit() {
      this.$http.postObj('user/update', this.user).then((data) => {
        if (data.code === 0) {
          UT.setSessionJson('CUR_USER', data.data)
          this.$router.go(-1)
        } else {
          Toast(data.msg)
        }
      })
    },
    setUserImg(e) {
      const file = e.target.files[0]
      this.userHeadImg = require('../assets/img/loading.png')
      this.uploadHeadImage(file)
      e.target.value = ''
    },
    uploadHeadImage(file) {
      this.isUploading = true
      let fd = new FormData()
      fd.append('file', file)
      this.$http.post('file/upload', fd).then((data) => {
        if (data.code === 0) {
          this.user.headImage = data.data
          this.userHeadImg = `${__FILESERVER__}file/download?filId=${data.data}`
        } else {
          Toast(data.msg)
        }
        this.isUploading = false
      }).catch(() => this.isUploading = false)
    },
    openDatepicker() {
      this.birthday = this.user.birthday
      this.$refs.birthday.open()
    },
    handleConfirm(result) {
      this.user.birthday = result
      console.log(result)
    }
  },
  components: {},
  filters: { date },
  watch: {},
  mounted() {
    this.user = UT.getSessionJson('CUR_USER')
    this.userHeadImg = `${__FILESERVER__}file/download?filId=${this.user.headImage}`
    this.birthday = this.user.birthday
  }
}
</script>

<style lang="less">
@import "../assets/less/app.variable.less";

.user {
  .user-img {
    margin: 10px 0;
    width: 50px;
    height: 50px;
    border-radius: 100%;
  }
  .content > .mint-cell:nth-child(n + 2) {
    border-top: 1px solid @borderColor;
  }
  .mint-cell-value input {
    text-align: right;
  }
  .mint-radiolist {
    padding: 0 10px;
    background-color: #fff;
    display: -webkit-box;
    display: flex;
    align-items: center;
    border-top: 1px solid @borderColor;
    .mint-cell {
      align-self: flex-end;
    }
    .mint-radiolist-title {
      flex: 1;
      width: 105px;
      color: initial;
      font-size: initial;
      margin: 0;
    }
    .mint-cell-wrapper {
      padding: 0;
    }
    .mint-radiolist-label {
      padding: 0 0 0 20px;
    }
  }
}
</style>